<template>
    <div class="Utilize">
        <p class="Utilize_P">故障频发 Top8</p>
        <div ref="chart" class="Utilize_main">

        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const data = {
    cities: ['聊城市', '德州市', '枣庄市', '济宁市', '菏泽市', '临沂市', '青岛市', '济南市'],
    equipmentCount: [5, 4, 4, 4, 4, 3, 3, 2],
}

const Utilize = () => {

    myChart = echarts.init(chart.value);

    window.addEventListener('resize', function () {
        myChart.resize();
    });

    const option = {
        tooltip: {},
        xAxis: {
            type: 'category',
            data: data.cities,
            axisLabel: {
                rotate: -40,
            },
            axisLine: {
                lineStyle: {
                    color: '#fff',
                },
            },

        },
        yAxis: {
            type: 'value',
            show: false,  // 隐藏 y 轴
        },
        legend: {
            data: ['故障设备数量（台）'],
            right: 10, // 图例距离右侧的距离
            top: 10,   // 图例距离顶部的距离
            textStyle: {
                color: '#fff',  // 字体颜色，和背景对比
            },
            itemWidth: 10, // 图例标志的宽度
            itemHeight: 10, // 图例标志的高度
        },
        series: [
            {
                name: '故障设备数量（台）',
                type: 'bar',
                data: data.equipmentCount,
                itemStyle: {
                    color: '#73C0DE',
                },
                label: {
                    show: true,  // 显示数据标签
                    position: 'top',  // 标签显示在柱子顶部
                    color: '#fff',    // 数据字体颜色
                },
            },
        ],
        grid: {
            left: '0%',
            right: '5%',
            top: "10%",
            bottom: '10%',
            containLabel: true,
        },
    }

    myChart.setOption(option)
}

onMounted(() => {
    Utilize()
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();
    }
})

</script>

<style lang="scss" scoped>
.Utilize {
    width: 400px;
    height: 200px;
    position: fixed;
    top: 290px;
    right: 8px;
    background: url(/src/assets/Frame_Bottom.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .Utilize_P {
        width: 100%;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 15px;
    }

    .Utilize_main {
        width: 100%;
        height: 100%;
    }
}
</style>